<template>
    <div class="cityList">
        <!-- header组件 -->
        <city-header></city-header>
        <!-- search组件 -->
        <city-search :cities="cities"></city-search>
       <!-- letter英文字母组件 -->
        <city-letter 
            :cities="cities" 
            @change="changeLetter"
        ></city-letter>
        <!-- list组件 -->
        <city-list 
            :cities="cities" 
            :hotCities="hotCities"
            :letter="letter"
        ></city-list>
    </div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityLetter from './components/Letter'
import axios from 'axios'


export default {
    name:'city',
    components:{
        CityHeader,
        CitySearch,
        CityList,
        CityLetter
    },
    data () {
        return {
            cities:{},
            hotCities:[],
            letter:''
        }
    },
    methods : {
        getCityInfo () {
            axios.get('/static/mock/city.json')
                .then( res => {
                    const obj = res.data;
                    if(obj.ret && obj.data){
                        this.cities = obj.data.cities;
                        this.hotCities = obj.data.hotCities;
                    }
                })
        },
        changeLetter (letter){
            this.letter = letter;
        },
        changeItem(){

        }
    },
    mounted () {
        this.getCityInfo()
    }
}
</script>

<style scoped lang="less">
// .top{
//     position: sticky;
//     left: 0;
//     top: 0;
// }
</style>